<template>
  <!-- 多条件搜索 -->
  <el-dialog class="filter-dialog" :title="dialog.title" :visible.sync="dialog.isOpen"
  :close-on-click-modal="false" :close-on-press-escape="false" v-el-drag-dialog
  width="60%" center @close="handleClose" @open="handleOpen">
    <div class="content">
      <el-table stripe style="width: 100%" border :data="rules" height="200">
        <el-table-column align="center" label="字段" width="150">
          <template #default="{row}">
            <el-select v-model="row.field" placeholder="请选择" size="mini">
              <el-option v-for="item in fields" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="条件" width="120">
          <template #default="{row}">
            <el-select v-model="row.conditions" placeholder="请选择" size="mini">
              <el-option v-for="item in conditions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="searchKey" align="center" label="搜索值">
          <template #default="{row}">
            <el-input v-model="row.searchKey" size="mini" clearable />
          </template>
        </el-table-column>
        <el-table-column prop="groupOp" align="center" label="关系" width="95">
          <template #default="{row}">
            <el-select v-model="row.relatives" placeholder="请选择" size="mini">
              <el-option v-for="item in relatives" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop align="center" label="操作" width="100">
          <template #default="{$index}">
            <el-button circle type="primary" size="mini" icon="el-icon-plus"
              :class="{ hidden: $index !== 0 }" @click="add" />
            <el-button circle type="primary" size="mini" icon="el-icon-minus"
              @click="minus($index)" />
          </template>
        </el-table-column>
      </el-table>
      <el-input v-model="strVal" type="textarea" placeholder="结果展示" />
    </div>
    <span slot="footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { Dialog, Table, TableColumn, Input, Select, Option, Button } from 'element-ui'
// import dragDialog from '@/directives/el-drag-dialog/drag'
export default {
  name: 'searchMult',
  props: {
    dialog: {
      type: Object,
      default: () => {
        return { isOpen: false, title: '' }
      }
    },
    fields: { // 字段
      type: Array,
      default() {
        return [
          { id: 'saleord_no', name: '销售订单号' },
          { id: 'supply_desc', name: '供应商名称' },
          { id: 'pcordhed_no', name: '采购订单号' },
          { id: 'feedback_msg', name: '状态' },
          { id: 'mtr_code', name: '物料编码' },
          { id: 'mtr_desc', name: '物料名称' },
          { id: 'mtr_specs', name: '物料规格' },
          { id: 'mtr_declar', name: '物料描述' },
          { id: 'dlv_empdesc', name: '下达人' },
          { id: 'num', name: '订单数' }
        ]
      }
    },
    conditions: { // 条件
      type: Array,
      default() {
        return [
          { id: 'like', name: '包含' },
          { id: 'not like', name: '不包含' },
          { id: 'llike', name: '左包含' },
          { id: 'rlike', name: '右包含' },
          { id: '>=', name: '大于等于' },
          { id: '<', name: '小于' },
          { id: '=', name: '等于' }
        ]
      }
    },
    relatives: { // 关系
      type: Array,
      default() {
        return [
          { id: 'and', name: '并且' },
          { id: 'or', name: '或者' }
        ]
      }
    }
  },
  data() {
    return {
      rules: [], strVal: ''
    }
  },
  components: {
    ElDialog: Dialog, ElSelect: Select, ElInput: Input,
    ElTable: Table, ElTableColumn: TableColumn,
    ElOption: Option, ElButton: Button
  },
  computed: {
    defData() {
      const field = this.fields[0].id || ''
      const conditions = this.conditions[0].id || ''
      const relatives = this.relatives[0].id || ''
      return { field, conditions, relatives, searchKey: '' }
    }
  },
  created() {
  },
  methods: {
    // 处理打开
    handleOpen() {
      this.rules.push(Object.assign({}, this.defData))
    },
    // 处理关闭
    handleClose() {
      this.dialog.isOpen = false
      this.rules = []
      this.strVal = ''
    },
    // 添加

    add() {
      this.rules.push(Object.assign({}, this.defData))
    },
    // 减少
    minus(index) {
      if (this.rules.length > 1) {
        this.rules.splice(index, 1)
      }
    },
    // 确定
    submit() {
      if (this.rules.length > 0) {
        let str = this.rules.reduce((res, cur) => {
          if (cur.searchKey) {
            return res + `(${cur.field} ${cur.conditions} '|${cur.searchKey}|') ${cur.relatives}`
          }
          return res + ''
        }, '')
        if (str) {
          str = str.substring(0, str.lastIndexOf(' '))
        }
        this.$emit('filterSubmit', { data: this.rules, str })
        this.dialog.isOpen = false
      }
    }
  },
  watch: {
    rules: {
      // immediate: true, // 该回调将会在侦听开始之后被立即调用
      deep: true, // 在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
      handler(newVal, oldVal) {
        if (newVal.length) {
          const { fields, conditions, relatives } = this
          const str = newVal.reduce((res, cur) => {
            if (cur.searchKey) {
              const field = fields.find(o => o.id == cur.field).name || cur.field
              const condition = conditions.find(o => o.id == cur.conditions).name || cur.conditions
              const relative = relatives.find(o => o.id == cur.relatives).name || cur.relatives
              return res + `(${field} ${condition} '|${cur.searchKey}|') ${relative}`
            }
            return res + ''
          }, '')
          if (str) {
            this.strVal = str.substring(0, str.lastIndexOf(' '))
          }
        }
      }
    }
  }
  // directives: {dragDialog}
}
</script>

<style lang="scss" scoped>
.filter-dialog{
  ::v-deep .el-dialog__body {
    padding: 10px;
  }
  ::v-deep .el-dialog{
    position: relative;
    left: 0;
    top: 0;
    transform: none !important;
  }
}

.hidden {
  visibility: hidden;
}
</style>
